<template>
	<div class="contains">
		 <div class="bill-item">
			  <div class="bill-item-main">
				   <div class="bill-item-mouth">2023年12月</div>
				   <div class="bill-item-total"><span>增加1000积分</span><span>减少100积分</span></div>
			  </div>
			  <div class="bill-item-child">
				   <div class="bill-item-child-item">
					    <div class="bill-item-child-pic">
						</div>
						<div class="bill-item-child-content">
							 <div class="bill-item-child-title">捷安特 型号2023</div>
							 <div class="bill-item-child-date">2023年12月2日</div>
						</div>
						<div class="bill-item-span">+100</div>
				   </div>
				   <div class="bill-item-child-item">
						<div class="bill-item-child-pic">
						</div>
						<div class="bill-item-child-content">
							 <div class="bill-item-child-title">捷安特 型号2023</div>
							 <div class="bill-item-child-date">2023年12月2日</div>
						</div>
						<div class="bill-item-span">+100</div>
				   </div>
			  </div>
		 </div>
	</div>
</template>

<script>
</script>

<style>
	.bill-item { width: 100%; height: auto;}
	.bill-item-main { height: 80px; width: 100%; background: #eee;}
	.bill-item-mouth { height: 40px; line-height: 40px; text-indent: 2em; width: 100%;}
	.bill-item-total { height: 30px; text-indent:2em; color:#666;}
	.bill-item-total span { margin-right: 20px;}
	.bill-item-child { height: auto; width: 100%;}
	.bill-item-child-item { width: 100%; height: 100px; position: relative;}
	.bill-item-child-pic { display: inline-block; vertical-align: top; width: 80px; height: 80px; margin: 10px 10px; background: #666;}
	.bill-item-child-content { width: auto; height: 80px; display: inline-block;}
	.bill-item-child-title { width: 100%; height: 40px; margin-bottom: 20px; line-height: 40px;}
	.bill-item-child-date { color: #666;}
	.bill-item-span { width: 80px; height: 30px; color: red; font-weight: bold; position: absolute; top: 30px; right: 10px;}
</style>